const LiuLiangChart = (paramData) => {
  let data = {
    xList: ["16:02", "16:03", "16:04", "16:05", "16:06"],
    legendArr: ["干流量", "支流量"],
    yList: [
      {
        data: [10, 12, 15, 17, 19],
        name: "干流量",
        type: "line",
        smooth: true,
      },
      {
        data: [22, 26, 22, 28, 25, 20],
        name: "支流量",
        type: "line",
        smooth: true,
      },
    ],
  };
  let inputObj = paramData || data;
  // let inputObj =  data;
  let xLabel = inputObj.xList;

  inputObj.yList.forEach((element, index) => {
    let seriesItem = {
      type: "line",
      symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 6,
      lineStyle: {
        normal: {
          width: 2,
          color: "#6c50f3", // 线条颜色
          type: "dashed",
        },
      },
      itemStyle: {
        color: "#6c50f3",
        borderWidth: 1,
        borderColor: "#fff",
      },
      label: {
        show: true,
      },
    };
    return { ...element, ...seriesItem };
  });
  const defaultConfig = {
    backgroundColor: "transparent",
    grid: {
      top: "10%",
      left: "4%",
      right: "4%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      confine: true,
      transitionDuration: 0.1,
      backgroundColor: "rgba(15, 74, 123,1)",
      borderWidth: 0,
      textStyle: {
        color: "white",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
      axisPointer: {
        z: -10,
        lineStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(64,141,207,0.4)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(64,141,207,0.4)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          type: "solid",
          width: 1,
        },
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: false,
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "rgba(255,255,255, 0.6)",
            fontSize: 12,
          },
          interval: 1,
          formatter: function (data) {
            return data;
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: xLabel,
      },
    ],
    yAxis: [
      {
        min: 0,
        // max: 100,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(102,108,180,0.4)",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "rgba(255,255,255,1)",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 18,
        xAxisIndex: [0],
        bottom: 30,

        start: 10,
        end: 30,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "100%",
        handleStyle: {
          color: "#d3dee5",
          // color: "blue",
        },
        textStyle: {
          color: "#fff",
          // color:"red",
        },
        // fillerColor:"rgba(67,55,160,0.4)",
        borderColor: "#90979c",
      },
    ],
    series: inputObj.yList,
  };

  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const YaLiChart = (paramData) => {
  let data = {
    xList: ["18:01", "18:05"],
    legendArr: [],
    yList: [
      {
        data: [10, 8],
        type: "line",
        smooth: true,
      },
    ],
  };
  let inputObj = paramData || data;
  // let inputObj = data;
  const defaultConfig = {
    backgroundColor: "transparent",

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
      backgroundColor: "rgba(15, 74, 123,1)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
    },
    grid: {
      top: "10%",
      left: "4%",
      right: "4%",
      bottom: "2%",
      containLabel: true,
    },
    legend: {
      x: "10%",
      top: "1%",
      textStyle: {
        color: "#90979c",
      },
      data: [""],
    },

    calculable: true,
    xAxis: [
      {
        type: "category",
        sLine: {
          lineStyle: {
            color: "rgba(206,245,233,0.2)",
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: "rgba(255,255,255, 0.6)",
            fontSize: 12,
          },
        },
        data: inputObj.xList,
      },
    ],
    yAxis: [
      {
        min: 0,
        // max: 100,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(102,108,180,0.4)",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "rgba(255,255,255,1)",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 18,
        xAxisIndex: [0],
        bottom: 30,
        start: 10,
        end: 30,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        textStyle: {
          color: "#fff",
        },
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    // series: inputObj.yList,
    series: [
      {
        name: "",
        type: "line",
        stack: "总量",
        symbolSize: 8,
        symbol: "circle",
        itemStyle: {
          normal: {
            color: "rgba(252,230,48,1)",
            barBorderRadius: 0,
            label: {
              show: true,
              position: "top",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
          },
        },
        data: inputObj.yList[0].data,
      },
    ],
  };

  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const ShuiWeiChart = (paramData) => {
  let datas = {
    xList: ["18:31", "18:32"],
    legendArr: [],
    yList: [
      {
        data: [2.3, 3.5],
        type: "line",
        smooth: true,
      },
    ],
  };
  let inputObj = paramData || datas;
  // let inputObj = datas;
  const defaultConfig = {
    grid: {
      top: "10%",
      left: "4%",
      right: "4%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      confine: true,
      transitionDuration: 0.1,
      backgroundColor: "rgba(15, 74, 123,1)",
      borderWidth: 0,
      textStyle: {
        color: "white",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
      axisPointer: {
        z: -10,
        lineStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(64,141,207,0.4)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(64,141,207,0.4)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          type: "solid",
          width: 1,
        },
      },
    },
    // legend: [{
    //     data: legendname1,
    //     // selectedMode: false,//点击刷新图表
    //     top: "3%",
    //     left: "0.5%",
    //     itemWidth: 20,
    //     itemHeight: 10,
    //     // itemGap: 30,
    //     symbolKeepAspect: true,
    //     orient: 'horizontal',
    //     // icon: 'rect',
    //     textStyle: {
    //         fontFamily: 'SourceHanSansCN-Regular',
    //         color: 'white',
    //         fontSize: 12,
    //     },
    // },
    // {
    //     data: legendname2,
    //     right: '10%',
    //     top: "3%",
    //     textStyle: {
    //         fontFamily: 'SourceHanSansCN-Regular',
    //         color: 'white',
    //         fontSize: 12,
    //     },
    //     itemWidth: 20,
    //     itemHeight: 10,
    // },
    // ],
    dataZoom: [
      {
        show: true,
        height: 18,
        xAxisIndex: [0],
        bottom: 30,
        start: 10,
        end: 30,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        textStyle: {
          color: "#fff",
        },
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(206,245,233,0.2)",
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 12,
            fontWeight: "normal",
            fontFamily: "SourceHanSansCN-Regular",
          },
          lineStyle: {
            width: 20,
          },
        },
        data: inputObj.xList,
      },
    ],
    yAxis: [
      {
        min: 0,
        // max: 100,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(102,108,180,0.4)",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "rgba(255,255,255,1)",
          },
          formatter: function (value) {
            return value + "";
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    // yAxis: [{
    //     type: 'value',
    //     splitLine: {
    //         show: true,
    //         lineStyle: {
    //             color: colorList,
    //             type: 'dashed',
    //             // type: [15, 10],
    //             // dashOffset: 5,
    //         },
    //     },
    //     axisLabel: {
    //         show: true,
    //         textStyle: {
    //             fontSize: 12,
    //             color: "rgba(255,255,255,1)"
    //         },
    //         formatter: function (value) {
    //             return value + "";
    //         }
    //     },
    //     axisTick: {
    //         show: false
    //     },
    //     axisLine: {
    //         show: true,
    //         lineStyle: {
    //             color: "rgba(206,245,233,0.2)",
    //         }
    //     },

    // },
    // // {
    // //     type: 'value',
    // //     axisLabel: {
    // //         textStyle: {
    // //             color: 'rgba(255,255,255,1)',
    // //             fontSize: 12
    // //         },
    // //         verticalAlign: "bottom",
    // //         formatter: function (value) {
    // //             return value + "";
    // //         }
    // //     },
    // //     axisLine: {
    // //         show: true,
    // //         lineStyle: {
    // //             color: "rgba(206,245,233,0.2)",
    // //         }
    // //     },
    // //     splitLine: {
    // //         show: false,
    // //     },
    // //     axisTick: {
    // //         show: false
    // //     },

    // // }
    // ],
    series: [
      {
        //上面偏紫色
        name: "",
        type: "line",
        smooth: "true",
        symbol: "circle",
        symbolSize: 2,
        itemStyle: {
          color: "#00ff9c",
          barBorderRadius: 0,
        },
        lineStyle: {
          width: 2,
          color: "#00ff9c",
        },

        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0,255,156,0.8)", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "rgba(0,255,156,0.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,255,156,0.01)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        },
        data: inputObj.yList[0].data,
      },
    ],
  };

  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const ShuiLiangChart = (paramData) => {
  let datas = {
    xList: ["18:31", "18:32"],
    legendArr: [],
    yList: [
      {
        data: [2.3, 3.5],
        type: "line",
        smooth: true,
      },
    ],
  };
  let inputObj = paramData || datas;
  // let inputObj = datas;
  const defaultConfig = {
    grid: {
      top: "10%",
      left: "4%",
      right: "4%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      confine: true,
      transitionDuration: 0.1,
      backgroundColor: "rgba(15, 74, 123,1)",
      borderWidth: 0,
      textStyle: {
        color: "white",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
      axisPointer: {
        z: -10,
        lineStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(64,141,207,0.4)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(64,141,207,0.4)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          type: "solid",
          width: 1,
        },
      },
    },
    // legend: [{
    //     data: legendname1,
    //     // selectedMode: false,//点击刷新图表
    //     top: "3%",
    //     left: "0.5%",
    //     itemWidth: 20,
    //     itemHeight: 10,
    //     // itemGap: 30,
    //     symbolKeepAspect: true,
    //     orient: 'horizontal',
    //     // icon: 'rect',
    //     textStyle: {
    //         fontFamily: 'SourceHanSansCN-Regular',
    //         color: 'white',
    //         fontSize: 12,
    //     },
    // },
    // {
    //     data: legendname2,
    //     right: '10%',
    //     top: "3%",
    //     textStyle: {
    //         fontFamily: 'SourceHanSansCN-Regular',
    //         color: 'white',
    //         fontSize: 12,
    //     },
    //     itemWidth: 20,
    //     itemHeight: 10,
    // },
    // ],
    dataZoom: [
      {
        show: true,
        height: 18,
        xAxisIndex: [0],
        bottom: 30,
        start: 10,
        end: 30,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        textStyle: {
          color: "#fff",
        },
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "rgba(206,245,233,0.2)",
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 12,
            fontWeight: "normal",
            fontFamily: "SourceHanSansCN-Regular",
          },
          lineStyle: {
            width: 20,
          },
        },
        data: inputObj.xList,
      },
    ],
    yAxis: [
      {
        min: 0,
        // max: 100,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(102,108,180,0.4)",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "rgba(255,255,255,1)",
          },
          formatter: function (value) {
            return value + "";
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],

    series: [
      {
        //上面偏紫色
        name: "",
        type: "line",
        smooth: "true",
        symbol: "circle",
        symbolSize: 2,
        itemStyle: {
          color: "#25a2ff",
          barBorderRadius: 0,
        },
        lineStyle: {
          width: 2,
          color: "#25a2ff",
        },

        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(34,81,184,0.8)", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "rgba(34,81,184,0.1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(34,81,184,0.01)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        },
        data: inputObj.yList[0].data,
      },
    ],
  };

  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const LouSunLvSort = (paramData) => {
  let defaultData = [
    {
      area_name: "区域5",
      leakage_rate: 0.99968,
      chan_code: "004001",
      chan_name: "输水西干一级供水北干管",
      supply_water: 13864,
      areaItem: [
        {
          device_name: "输水西干一级供水北干管八支管8-3(CK1-10)",
          device_id: "907926198",
          lon: 104.3425349,
          sort: 1,
          record_type: "2",
          lat: 35.7074756,
        },
        {
          device_name: "称巉界",
          device_id: "606209232",
          lon: 104.3162115,
          sort: 0,
          record_type: "1",
          lat: 35.7135014,
        },
      ],
      area_id: 5,
      channel_id: "004001",
      leakage_water: 13859.56,
    },
    {
      area_name: "区域2（2023年有三个水池还未安装）",
      leakage_rate: 0.965862,
      chan_code: "001003",
      chan_name: "输水东干供水南干管",
      supply_water: 355151,
      areaItem: [
        {
          device_name: "输水东干供水南干管干管(LJB1-5)",
          device_id: "23178222058",
          lon: 104.7629291,
          sort: 0,
          record_type: "1",
          lat: 35.5250946,
        },
      ],
      area_id: 2,
      channel_id: "001003",
      leakage_water: 343027,
    },
    {
      area_name: "区域7",
      leakage_rate: 0.964384,
      chan_code: "004001",
      chan_name: "输水西干一级供水北干管",
      supply_water: 5840,
      areaItem: [
        {
          device_name: "巉御界",
          device_id: "606300005",
          lon: 104.3938212,
          sort: 0,
          record_type: "1",
          lat: 35.8061505,
        },
        {
          device_name: "输水西干一级供水北干管十支管(LJG1-1)",
          device_id: "621102022",
          lon: 104.3933032,
          sort: 1,
          record_type: "0",
          lat: 35.80783,
        },
      ],
      area_id: 7,
      channel_id: "004001",
      leakage_water: 5632,
    },
    {
      area_name: "区域2（有2023年新增DHX点位未配置）",
      leakage_rate: 0.7222,
      chan_code: "001002",
      chan_name: "输水东干供水北干管",
      supply_water: 74960,
      areaItem: [
        {
          device_name: "输水东干供水北干管18直分(QL1-1)",
          device_id: "907926170",
          lon: 104.666092,
          sort: 1,
          record_type: "0",
          lat: 35.6754637,
        },
        {
          device_name: "青葛界",
          device_id: "606300004",
          lon: 104.6665238,
          sort: 0,
          record_type: "1",
          lat: 35.6737645,
        },
        {
          device_name: "输水东干供水北干五支管(CK1-2)",
          device_id: "621102004",
          lon: 104.6564403,
          sort: 3,
          record_type: "0",
          lat: 35.7033026,
        },
        {
          device_name: "输水东干供水北干六支管(CK1-3)(CK1-3)",
          device_id: "621102005",
          lon: 104.65725,
          sort: 4,
          record_type: "0",
          lat: 35.7247093,
        },
        {
          device_name: "输水东干供水北干管四支管(QL1-3)",
          device_id: "621102034",
          lon: 104.6685783,
          sort: 2,
          record_type: "0",
          lat: 35.6891593,
        },
      ],
      area_id: 2,
      channel_id: "001002",
      leakage_water: 54136.1,
    },
    {
      area_name: "区域2",
      leakage_rate: 0.626224,
      chan_code: "004004",
      chan_name: "输水西干二级供水南干管",
      supply_water: 8556,
      areaItem: [
        {
          device_name: "输水西干二级供水南干管干管(XQ1-1)",
          device_id: "621102052",
          lon: 104.425554,
          sort: 0,
          record_type: "1",
          lat: 35.3799874,
        },
        {
          device_name: "输水西干二级供水南干管三支管3-7(XQ1-6)",
          device_id: "907926178",
          lon: 104.4542208,
          sort: 1,
          record_type: "0",
          lat: 35.4190021,
        },
        {
          device_name: "香陇界",
          device_id: "606300001",
          lon: 104.4879137,
          sort: 2,
          record_type: "2",
          lat: 35.3351161,
        },
      ],
      area_id: 2,
      channel_id: "004004",
      leakage_water: 5357.97,
    },
  ];
  let data = paramData || defaultData;
  let ListData = [];
  // 将需要排序的 key, 按照 "从小到大" 进行排列
  let sortKeys = Object.keys(data).sort((a, b) => {
    return data[b].leakage_rate - data[a].leakage_rate;
  });
  // 循环排列好的 key, 重新组成一个新的数组
  for (var sortIndex in sortKeys) {
    ListData.push(data[sortKeys[sortIndex]]);
  }

  var chartData1 = [];
  var chartName1 = [];
  for (let i = 0; i < ListData.length; i++) {
    chartData1.push(ListData[i].leakage_rate);
    chartName1.push(ListData[i].chan_name + "-" + ListData[i].area_name);
  }

  var colorList = ["#9d4142", "#9e6540", "#967f1c ", "#1d7fae"];
  var chartData = [1236, 1214, 1129, 925, 855];
  var chartName = ["柜台01", "柜台02", "柜台03", "柜台04", "柜台05"];

  var emptyData = chartData1.map(function (v, i) {
    var item = {
      value: 1,
      label: {
        //右边数值
        formatter: "{a|" + (v * 100).toFixed(2) + "%}",
        position: "right",
        rich: {
          a: {
            color: "#fff",
            fontSize: 13,
            padding: [5, 10],
          },
        },
      },
    };
    return item;
  });

  const defaultConfig = {
    backgroundColor: "transparent",
    tooltip: {
      show: true,
      trigger: "item",
      formatter: function (params, ticket, callback) {
        var res = "";
        var name = chartName1[params.dataIndex];
        var value = chartData1[params.dataIndex];
        res = name + "：" + value;
        return res;
      },
      backgroundColor: "rgba(15, 74, 123,1)",
      textStyle: {
        color: "#fff",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
    },
    grid: {
      top: "6%",
      right: "20%",
      left: "14%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: [
      {
        show: false,
      },
      {
        type: "value",
        axisLabel: {
          //坐标轴字体颜色
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(22, 96, 147,0.8)",
          },
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        splitLine: {
          //网格
          show: false,
        },
        max: function (value) {
          return value.max;
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        show: true,
        inverse: true,
        data: chartName1,
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#fff",
          fontSize: 13,
          inside: true,
          padding: [0, 0, 40, -36],
          // 配置序号背景
          rich: {
            a1: {
              color: "#fff",
              backgroundColor: colorList[0],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
            a2: {
              color: "#fff",
              backgroundColor: colorList[1],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
            a3: {
              color: "#fff",
              backgroundColor: colorList[2],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
            b: {
              color: "#fff",
              backgroundColor: colorList[3],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
          },
          formatter: function (params, index) {
            var leftIndex = index + 1;
            if (leftIndex < 4) {
              return [
                "{a" + leftIndex + "|" + leftIndex + "}" + "  " + params,
              ].join("/n");
            } else {
              return ["{b|" + leftIndex + "}" + "  " + params].join("/n");
            }
          },
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "category",
        name: "",
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        inverse: true,
        data: chartName1,
      },
    ],
    series: [
      {
        type: "bar",
        barWidth: "20%",
        yAxisIndex: 1,
        silent: true,
        itemStyle: {
          normal: {
            color: "#166093",
            barBorderRadius: [20, 20],
          },
        },
        label: {
          show: true,
        },
        data: emptyData,
      },
      {
        show: true,
        type: "bar",
        barWidth: "20%",
        z: 2,
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  // 柱状图上方颜色
                  offset: 0,
                  color: "rgba(0, 176, 248,0.83)",
                },

                {
                  // 柱状图下方颜色
                  offset: 1,
                  color: "rgba(0, 253, 255, 0.6) ",
                },
              ],
            },
            barBorderRadius: [20, 20],
          },
        },
        data: chartData1,
      },
    ],
  };

  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const LeiJiGongShuiLiang = (paramData) => {
  let backgroundColor = "rgba(0,0,0,0)";
  let defaultData = [
    {
      name: "内官收费站",
      supply: 2.3752,
    },
    {
      name: "凤翔收费站",
      supply: 8.3001,
    },
    {
      name: "团结收费站",
      supply: 1.9229,
    },
    {
      name: "宁远收费站",
      supply: 1.6402,
    },
    {
      name: "巉口收费站",
      supply: -74.3303,
    },
    {
      name: "李家堡收费站",
      supply: 4.6701,
    },
    {
      name: "称钩驿收费站",
      supply: 70.2826,
    },
    {
      name: "符家川收费站",
      supply: 9.4649,
    },
    {
      name: "香泉收费站",
      supply: -6.6246,
    },
    {
      name: "鲁家沟收费站",
      supply: 79.275,
    },
  ];
  let data = paramData || defaultData;
  var chartName = data.map((item) => item.name);
  var chartData = data.map((item) => item.supply);
  96;
  let chartData1 = [chartData, chartName];

  var getmydmc = chartData1[1]; //数据点名称
  var getmyd = chartData1[0]; //收入金额
  var getmydzd = [];

  let big = 0;
  getmyd.forEach((el) => {
    if (!(el === undefined || el === "")) {
      if (big < Number(el)) {
        big = Number(el);
      }
    }
  });
  for (let i = 0; i < getmyd.length; i++) {
    getmydzd.push(big * 4);
  }
  //计算最大值
  function calMax(arr) {
    let max = 0;
    arr.forEach((el) => {
      el.forEach((el1) => {
        if (!(el1 === undefined || el1 === "")) {
          if (max < Number(el1)) {
            max = Number(el1);
          }
        }
      });
    });
    let maxint = Math.ceil(max / 9.5);
    //不让最高的值超过最上面的刻度
    let maxval = maxint * 10;
    //让显示的刻度是整数
    return maxval;
  }

  var max = Math.ceil(calMax([getmyd]) / 10) * 10;
  const colorList = ["#74A3FF", "#72B5FF"];

  const defaultConfig = {
    backgroundColor: backgroundColor,
    grid: {
      left: "2%",
      right: "4%",
      bottom: "2%",
      top: "2%",
      containLabel: true,
    },
    tooltip: {
      formatter: (params) => {
        if (params.name !== "") {
          return params.name + " : " + getmyd[params.dataIndex];
        }
      },
      textStyle: {
        align: "left",
      },
      backgroundColor: "rgba(15, 74, 123,1)",
      textStyle: {
        color: "#fff",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
    },
    xAxis: [
      {
        type: "value",
        axisLabel: {
          show: false,
          color: "#fff",
          formatter: function (val) {
            return val + "";
          },
          textStyle: {
            fontSize: "13",
          },
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 5, //  平均分为5份
        splitNumber: 5,
        splitLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
            width: 1,
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: "value",
        axisLabel: {
          show: false,
        },
        min: 0,
        max: max, // 计算最大值
        interval: max / 10, //  平均分为5份
        splitNumber: 10,
        splitLine: {
          show: false,
          lineStyle: {
            type: "dashed",
            color: "#D8D8D8",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        inverse: false,
        data: getmydmc,
        axisLabel: {
          padding: [0, 0, 10, 0],
          inside: true,
          textStyle: {
            fontSize: 14,
            fontFamily: "PingFang SC",
            fontWeight: 400,
            color: "#fff",
            align: "left",
          },

          formatter: "{value}\n{a|占位}",
          rich: {
            a: {
              color: "transparent",
              lineHeight: 30,
              fontFamily: "digital",
              fontSize: 14,
              shadowColor: "rgba(0, 0, 0, 1)",
              shadowBlur: 10,
            },
          },
        },
        // offset: 0,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },

      {
        //左侧柱状图的Y轴
        gridIndex: 0, //y轴所在的 grid 的索引
        splitLine: "none",
        axisTick: "none",
        axisLine: "none",
        data: getmyd,
        inverse: false,
        axisLabel: {
          show: true,
          verticalAlign: "bottom",
          align: "right",
          inside: true,
          padding: [0, 0, 10, 0],
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
          formatter: function (value) {
            return "{x|" + value + "}  {y|" + "m³}";
          },
          rich: {
            y: {
              color: "#17aaff",
              fontFamily: "Orbitron",
              fontSize: 14,
            },
            x: {
              color: "#fff",
              fontFamily: "Orbitron",
              fontSize: 14,
            },
          },
        },
      },
    ],
    // dataZoom: [
    //     {
    //         type: 'inside',
    //         show: true,
    //         height: 18,
    //         start: 1,
    //         end: 100,
    //         orient: 'vertical',
    //         zlevel: 66,
    //     },
    // ],
    series: [
      {
        name: "值",
        type: "bar",
        barGap: "-120%",
        // zlevel: 1,
        xAxisIndex: 0,
        label: {
          show: false,
          position: "right",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#46B7ED", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#17cdff", // 100% 处的颜色
                },
              ],
            },
          },
        },
        barWidth: 7,
        data: getmyd,
        z: 0,
      },

      {
        name: "背景",
        type: "bar",
        barWidth: 11,
        barGap: "-130%",
        data: getmydzd,
        itemStyle: {
          normal: {
            // color: 'rgba(5,59,113,.7)',
            color: "transparent",
            barBorderRadius: 0,
            borderColor: "#00fbff1a",
          },
        },
        z: -1,
      },
    ],
  };

  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const CurrentMonthPercent = (paramData) => {
  let defaultData = {
    press: 1,
    water: 41,
  };
  let Data = paramData || defaultData;
  let data = [
    { value: Data.press, name: "压力" },
    { value: Data.water, name: "水位" },
  ];
  const defaultConfig = {
    backgroundColor: "transparent",
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
      backgroundColor: "rgba(15, 74, 123,1)",
      textStyle: {
        color: "#fff",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
    },
    legend: {
      orient: "vertical",
      right: "8%",
      top: "40%",
      itemWidth: 12,
      itemHeight: 12,
      data: data.map((item) => item.name),
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["42%", "55%"],
        color: [
          "#d74e67",
          "#0092ff",
          "#eba954",
          "#21b6b9",
          "#60a900",
          "#01949b",
          " #f17677",
        ],
        label: {
          normal: {
            formatter: "{b}\n{d}%",
          },
        },
        itemStyle: {
          normal: {
            borderColor: "transparent",
            borderWidth: 1,
          },
        },
        data: data,
      },
    ],
  };
  const opt = Object.assign({}, defaultConfig);
  return opt;
};

const halfYearWarnChart = (paramData) => {
  var defaultData = {
    press: [
      {
        month: "07",
        count: 1,
      },
      {
        month: "08",
        count: 0,
      },
      {
        month: "09",
        count: 0,
      },
      {
        month: "10",
        count: 0,
      },
      {
        month: "11",
        count: 0,
      },
      {
        month: "12",
        count: 0,
      },
    ],
    water: [
      {
        month: "07",
        count: 41,
      },
      {
        month: "08",
        count: 0,
      },
      {
        month: "09",
        count: 0,
      },
      {
        month: "10",
        count: 0,
      },
      {
        month: "11",
        count: 0,
      },
      {
        month: "12",
        count: 0,
      },
    ],
  };
  let data = paramData || defaultData;
  var timeData = [];
  var pressData = [];
  data.press.map((item, index) => {
    timeData.push(item.month);
    pressData.push(item.count);
  });
  var waterData = [];
  data.water.map((item, index) => {
    waterData.push(item.count);
  });
  var fontColor = "#30eee9";
  const defaultConfig = {
    backgroundColor: "transparent",
    grid: {
      left: "5%",
      right: "10%",
      top: "20%",
      bottom: "2%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "item",
      backgroundColor: "rgba(15, 74, 123,1)",
      textStyle: {
        color: "#fff",
        borderColor: "transparent",
        fontSize: 12,
        align: "left",
      },
    },
    legend: {
      show: true,
      x: "right",
      y: "0",
      // icon: 'stack',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: "#1bb4f6",
      },
      data: ["水位", "压力"],
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        // axisLabel: {
        //     color: fontColor,
        //     formatter: function (value) {
        //         let text = value.slice(0,4) + "\n" +value.substring(5)+ "月";
        //         return text
        //     }
        // },
        axisLabel: {
          interval: 0,
          rotate: 45, //倾斜度 -90 至 90 默认为0
          margin: 10,
          textStyle: {
            color: fontColor,
          },
          formatter: function (value) {
            // let text = value + "月";
            let text = value.slice(0, 4) + "/" + value.substring(5);
            return text;
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#397cbc",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#195384",
          },
        },
        data: timeData,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "信息量",
        min: 0,
        // max: 1000,
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#2ad1d2",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#27b4c2",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#11366e",
          },
        },
      },
    ],
    series: [
      {
        name: "压力",
        type: "line",
        stack: "总量",
        symbol: "emptyCircle",
        symbolSize: 6,
        itemStyle: {
          normal: {
            color: "#0092f6",
            lineStyle: {
              color: "#0092f6",
              width: 1,
            },
          },
        },
        markPoint: {
          itemStyle: {
            normal: {
              color: "red",
            },
          },
        },
        data: pressData,
      },
      {
        name: "水位",
        type: "line",
        stack: "总量",
        symbol: "emptyCircle",
        symbolSize: 6,

        itemStyle: {
          normal: {
            color: "#00d4c7",
            lineStyle: {
              color: "#00d4c7",
              width: 1,
            },
          },
        },
        data: waterData,
      },
    ],
  };
  const opt = Object.assign({}, defaultConfig);
  return opt;
};

export default {
  LiuLiangChart,
  YaLiChart,
  ShuiWeiChart,
  ShuiLiangChart,
  LouSunLvSort,
  LeiJiGongShuiLiang,
  CurrentMonthPercent,
  halfYearWarnChart,
};
